<template>
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-row justify-between self-stretch">
        <image
          class="image"
          src="@/static/images/codefun/58a349b64cf2b639d7c13af9a57c0f96.png"
					@click="goToRoomAdmin()"
        />
        <image
          class="image"
          src="@/static/images/codefun/e23f8b5e33b9d980d4e21291715aa334.png"
        />
      </view>
      <view class="flex-col self-start group_2">
        <text class="text">你好，Bob。</text>
        <text class="mt-16 font text_2">欢迎使用Bob UI！</text>
      </view>
      <view class="flex-col self-stretch group_3">
        <view class="flex-row justify-between items-center">
          <text class="text_3">您的房间</text>
          <view class="flex-row items-center section">
<!--            <image
              class="image_2"
              src="@/static/images/codefun/2eb32c430cc161aa404980728444e3d2.png"
            />
            <text class="text_4">Add</text> -->
          </view>
        </view>
        <view class="mt-12 grid">
          <view v-for="(item, index) in rooms" :key="index" class="flex-col items-center relative grid-item" @click="goToRoom(item)" >
            <image
              class="image_3"
              :src="roomImgChooser(item.type)"
            />
            <text class="font text_5">{{item.name}}</text>
            <text class="font_2 text_6">{{item.type}}</text>
          </view>
				</view>
			</view>
		</view>
<!--          <view class="flex-col items-center relative grid-item" @click="goToRoom('a2')">
            <image
              class="image_3"
              src="@/static/images/codefun/28e70581a6a37a04736df6b7c55715a2.png"
            />
            <text class="font text_5">a2</text>
            <text class="font_2 text_6">10设备</text>
          </view> -->
<!--          <view class="flex-col items-center relative grid-item" @click="goToRoom('a3')">
            <image
              class="image_3"
              src="@/static/images/codefun/f4c09fdabb13fe58cfc8eb83a180e4aa.png"
            />
            <text class="font text_5">a3</text>
            <text class="font_2 text_6">10设备</text>
          </view> -->
<!--         <view class="flex-col items-center relative grid-item">
            <image
              class="image_3"
              src="@/static/images/codefun/23aea9ca51c616e4a7b89673b82b8734.png"
            />
            <text class="font text_5">默认房间</text>
            <text class="font_2 text_6">0设备</text>
          </view> -->
					<!-- 
          <view class="flex-col items-center relative grid-item">
            <image
              class="image_3"
              src="@/static/images/codefun/92ec49f3f2432762e90dfe7fe036107a.png"
            />
            <text class="font text_5">浴室</text>
            <text class="font_2 text_6">3 Device</text>
          </view>
          <view class="flex-col items-center relative grid-item">
            <image
              class="image_3"
              src="@/static/images/codefun/b09d495f062413ff82448fd96cf11100.png"
            />
            <text class="font text_5">餐厅</text>
            <text class="font_2 text_6">2 device</text>
          </view -->

<!--    <view class="flex-col justify-start items-center relative section_2">
      <view class="flex-row">
        <image
          class="equal-division-item"
          src="@/static/images/codefun/7c04b29aec73b908d76e3a56194b1777.png"
        />
        <image
          class="ml-62 equal-division-item"
          src="@/static/images/codefun/1517562fb220446c0e098f46870332f0.png"
        />
        <image
          class="ml-62 equal-division-item"
          src="@/static/images/codefun/e4df0eebaa3cd4e72403c58de8b2102c.png"
        />
        <image
          class="ml-62 equal-division-item"
          src="@/static/images/codefun/eda07d75897664f355f6aacd0396429d.png"
        />
      </view>
    </view> -->
  </view>

</template>

<script>
		// onLoad() {
			// console.log(deviceChooser(32,'a1'))
			// this.$tab.navigateTo(deviceChooser(35,'a1'))
			// this.$tab.navigateTo('/pages/pencil-sign/pencil-sign')
			// 特殊情况已做 this.$tab.navigateTo(deviceChooser(38,'a1'))
	import {listRoom, getRoom} from '@/api/system/room.js'
	import {roomChooser, roomImgChooser} from '@/utils/room/room.js'
	import mqtt from "mqtt";
	
  export default {
    components: {},
    props: {},
    data() {
      return {
				rooms: [
					{
						name: 'aaa',
						type: 'a1'
					},
					{
						name: 'bbb',
						type: 'a2'
					},
					{
						name: 'ccc',
						type: 'a3'
					}
				]
			};
    },
		onShow() {
			this.getRoomData()
			// this.$tab.navigateTo(deviceChooser(32,'a1'))
		},
		onPullDownRefresh() {
			this.getRoomData()
		},
    methods: {
		getRoomData(){
			this.$modal.loading('加载中...')
			listRoom().then(response => {
					this.rooms = response.rows
					this.$modal.closeLoading()
					uni.stopPullDownRefresh()
					console.log(this.rooms)
				})
			},
			roomImgChooser(roomType){
				return roomImgChooser(roomType)
			},
			/**
			goToRoomAdd(){
				this.$tab.navigateTo('/pages/room/roomAdd')
			},
			**/
			
			/** roomId 有且只有 a1,a2,a3
			**	deviceNum 是设备数量
			**/
			goToRoom(room){
				let roomCopy = { ...room }
				console.log(roomCopy)
				this.$tab.navigateTo(roomChooser(roomCopy))
			},
			goToRoomAdmin(){
				this.$tab.navigateTo('/pages/room/roomAdmin')
			}
		},
  };
	</script>

<style scoped lang="scss">
	@import url("@/css/common.css");
  .page {
    padding-top: 80rpx;
    background-color: #ffffff;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    .group {
      padding: 0 40rpx;
      .image {
        box-shadow: 0rpx 8rpx 80rpx #00000012;
        border-radius: 50%;
        width: 96rpx;
        height: 96rpx;
      }
      .group_2 {
        margin-top: 72rpx;
        width: 290rpx;
        .text {
          color: #273240;
          font-size: 48rpx;
          font-family: Poppins;
          line-height: 46.46rpx;
        }
        .text_2 {
          line-height: 38rpx;
        }
      }
      .group_3 {
        margin-top: 84rpx;
        .text_3 {
          color: #273240;
          font-size: 36rpx;
          font-family: Poppins;
          line-height: 33.62rpx;
        }
        .section {
          padding: 12rpx 32rpx;
          background-color: #00000000;
          border-radius: 20rpx;
          width: 156rpx;
          height: 72rpx;
          .image_2 {
            margin-left: 44rpx;
            width: 48rpx;
            height: 48rpx;
          }
          .text_4 {
            margin-left: -92rpx;
            color: #ffffff;
            font-size: 24rpx;
            font-family: Poppins;
            line-height: 17.92rpx;
          }
        }
        .grid {
          height: 100%;
          display: grid;
					margin-bottom: 48rpx;
          grid-template-rows: repeat(3, minmax(0, 1fr));
          grid-template-columns: repeat(2, minmax(0, 1fr));
          row-gap: 34rpx;
          column-gap: 32rpx;
          .grid-item {
            padding: 48rpx 0 80rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
            box-shadow: 10rpx 8rpx 80rpx #00000014;
            .image_3 {
              width: 96rpx;
              height: 96rpx;
            }
            .text_5 {
              margin-top: 16rpx;
              line-height: 29.66rpx;
            }
            .font_2 {
              font-size: 32rpx;
              font-family: Poppins;
              line-height: 29.64rpx;
              color: #838080;
            }
            .text_6 {
              margin-top: 28rpx;
            }
          }
        }
      }
      .font {
        font-size: 32rpx;
        font-family: Poppins;
        line-height: 29.64rpx;
        color: #273240;
      }
    }
    .section_2 {
      margin-top: -134rpx;
      padding: 52rpx 0;
      background-color: #f7f7f7;
      border-radius: 60rpx 60rpx 0rpx 0rpx;
      .equal-division-item {
        width: 46.6rpx;
        height: 46.6rpx;
      }
    }
  }
</style>
	